<template>
    <div
        style="padding-top: 40px"
        v-loading="loading"
        element-loading-text="正在加载,请稍等"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
    >
        <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">

            <el-tab-pane label="基础信息" name="first">
                <el-form :model="dataForm" ref="dataForm" label-width="120px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="基地名称">
                                <el-input v-model="dataForm.baseName" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="基地面积">
                                <el-input v-model="dataForm.baseArea" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="基地联系电话">
                                <el-input v-model="dataForm.contactPhone" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="签约手机">
                                <el-input v-model="dataForm.signPhone" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="基地种植物">
                                <el-input v-model="dataForm.growPlants" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="基地人员">
                                <el-input v-model="dataForm.users" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <!-- <el-col :span="12">
                            <el-form-item label="基地联系人">
                                <el-input v-model="dataForm.contactMan" placeholder="请输入基地人员姓名"></el-input>
                            </el-form-item>
                        </el-col> -->

                        <el-col :span="24">
                            <el-form-item label="基地地址">
                                <el-input
                                    v-model="dataForm.basePosition"
                                    :placeholder="addrPlaceholder"
                                    :disabled="addrDisabled"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <!-- 百度地图  -->
                    <baidu-map
                        :center="center"
                        :zoom="zoom"
                        @ready="handler"
                        style="height: 368px; margin: 15px 55px"
                        @click="getClickInfo"
                        :scroll-wheel-zoom="true"
                    >
                        <!-- 定位 -->
                        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>

                        <!-- 自定义搜索框 -->
                        <bm-control style="margin: 15px" v-if="isVisible">
                            <el-input v-model="inputSearchAddr" placeholder="搜索地址" style="height: 100px; width: 400px"></el-input>
                            <el-button type="primary" @click="searchClick()" style="margin-left: 10px">搜索</el-button>
                            <el-button type="primary" @click="enterAddrClick()" style="margin-left: 10px">手动输入地址</el-button>
                        </bm-control>

                        <!-- bm-local-search是自带的搜索功能,双向绑定 keyword 可以进行搜索 -->
                        <bm-local-search
                            :keyword="searchAddr"
                            :auto-viewport="false"
                            :selectFirstResult="true"
                            :location="location"
                            :panel="true"
                            v-on:searchcomplete="searchComplete"
                            style="display: none"
                        >
                        </bm-local-search>
                    </baidu-map>

                    <el-form-item label="详细介绍">
                        <el-input v-model="dataForm.detailDescribe" placeholder="" type="textarea" :disabled="true"></el-input>
                    </el-form-item>

                     <el-row>
                        <el-form-item label="图片">
                            <moreUpload
                                :initfileList="iconUrlListUrl"
                                :isMultiple="true"
                                :upFileNum="5"
                                :isUpdisable="false"
                                @moreUpFileHandleRemove="iconMoreUpFileHandleRemove"
                                @update="updateIconUrl"
                            ></moreUpload>
                        </el-form-item>
                    </el-row>

                    <el-row>
                        <el-form-item label="视频">
                            <moreUpVideo
                                :isShowFileList="true"
                                :isMultiple="true"
                                :isClickClearList="false"
                                :upFileNum="5"
                                :isUpdisable="false"
                                :initfileList="videoUrlListUrl"
                                @moreUpFileSuccessHandle="moreUpVideoSuccessHandle"
                                @moreUpFileHandleRemove="moreUpVideohandleRemove"
                                @moreUpFileErrorHandle="moreUpVideoFileErrorHandle"
                                @moreUpFileHandleExceed="moreUpVideoFileHandleExceed"
                            >
                            </moreUpVideo>
                        </el-form-item>
                    </el-row>

                </el-form>
            </el-tab-pane>

            <el-tab-pane label="基地财务管理" name="second">
                <el-form :model="dataMoneyForm" ref="dataMoneyForm" label-width="120px">
                    <h2 class="small-title">设施投入管理</h2>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="水利设施投入">
                                <el-input v-model="dataMoneyForm.waterFacility" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="设备设施投入">
                                <el-input v-model="dataMoneyForm.equipmentFacility" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="道路建设投入">
                                <el-input v-model="dataMoneyForm.roadFacility" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="厂房仓库投入">
                                <el-input v-model="dataMoneyForm.factoryFacility" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="其他设施投入">
                                <el-input v-model="dataMoneyForm.otherFacility" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <h2 class="small-title">经营管理</h2>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="人工费用支出">
                                <el-input v-model="dataMoneyForm.laborCost" placeholder="" :disabled="true"> </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="技术费用支出">
                                <el-input v-model="dataMoneyForm.technicalCost" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="运维费用支出">
                                <el-input v-model="dataMoneyForm.operationCost" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="管理费用支出">
                                <el-input v-model="dataMoneyForm.manageCost" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="其他费用支出">
                                <el-input v-model="dataMoneyForm.otherCost" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <h2 class="small-title">材料投入管理</h2>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="化肥购买支出">
                                <el-input v-model="dataMoneyForm.manureBug" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="农药购买支出">
                                <el-input v-model="dataMoneyForm.pesticideBug" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="种苗购买支出">
                                <el-input v-model="dataMoneyForm.germchitBug" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="其他材料支出">
                                <el-input v-model="dataMoneyForm.otherBug" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-tab-pane>

            <el-tab-pane label="产品质量及销售管理" name="three">
                <el-form :model="dataProductForm" ref="dataProductForm" @keyup.enter.native="dataProductFormSubmit()" label-width="120px">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="前三年总产量">
                                <el-input v-model="dataProductForm.lastThreeOutput" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="前两年总产量">
                                <el-input v-model="dataProductForm.lastTwoOutput" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="前一年总产量">
                                <el-input v-model="dataProductForm.lastOneOutput" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="前三年销售收入">
                                <el-input v-model="dataProductForm.lastThreeIncome" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="前两年销售收入">
                                <el-input v-model="dataProductForm.lastTwoIncome" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="前一年销售收入">
                                <el-input v-model="dataProductForm.lastOneIncome" placeholder="" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-tab-pane>
            
        </el-tabs>

    </div>
</template>
<script>
import API from '@/api';
import cloneDeep from 'lodash/cloneDeep';
import { BmLocalSearch } from 'vue-baidu-map';
import moreUpload from '../../components/upLoad/moreUpload';
import moreUpVideo from '../../components/upLoad/moreUpVideo';

export default {
     components: {
        BmLocalSearch,
        moreUpload,
        moreUpVideo
    },
    data() {
        return {
            visible: false,
            // 基础信息数据
            dataForm: {
                baseArea: '',
                baseId: '',
                baseName: '',
                basePosition: '',
                contactMan: '',
                contactPhone: '',
                detailDescribe: '',
                growPlants: '',
                latitude: '',
                longitude: '',
                signPhone: '',
                users: '',
                iconUrl: '', //图片
                videoUrl: '' //视频
            },

            //地图
            center: { lng: 0, lat: 0 },
            zoom: 3,
            inputSearchAddr: '',
            location: '',
            searchAddr: '',
            loading: false,
            addrDisabled: true,
            addrPlaceholder: '请在地图上选择基地地址',
            isVisible: false, //是否可见

            //图片
            iconUrlList: [],
            iconUrlListUrl: [],

            //视频
            videoUrlList: [],
            videoUrlListUrl: [],

            // 财力信息数据
            dataMoneyForm: {
                baseId: '',
                equipmentFacility: '',
                factoryFacility: '',
                germchitBug: '',
                laborCost: '',
                manageCost: '',
                manureBug: '',
                operationCost: '',
                otherBug: '',
                otherCost: '',
                otherFacility: '',
                pesticideBug: '',
                roadFacility: '',
                technicalCost: '',
                waterFacility: ''
            },
            // 产品质量数据
            dataProductForm: {
                baseId: '',
                lastOneIncome: '',
                lastOneOutput: '',
                lastThreeIncome: '',
                lastThreeOutput: '',
                lastTwoIncome: '',
                lastTwoOutput: ''
            },
            activeName: 'first'
        };
    },
    mounted() {

        var itemData = this.$route.query.itemData;
        var type = this.$route.query.type;
        if (type == 2) {
            var id = itemData.baseId;
            this.getBaseDeail(id); // 获取基本信息
            this.getBaseMondyDetail(id); // 获取财务信息
            this.getBaseProductDetail(id); // 获取产品质量信息
            this.getDetail(id);//获取审核内容详情
        }
        this.dialogType = type;
    },

    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        handleClose() {
            this.dataForm = {};
            this.$refs['dataForm'].resetFields();
        },
        // 基本信息
        getBaseDeail(baseId) {
            var _that = this;
            API.base.lookBaseInfoDetail({ baseId: baseId }).then((res) => {
                console.log(res);
                this.dataForm = res.result;
                this.dataForm['baseId'] = baseId;

                  //处理图片
                var imgUrlQz = window.baseUrl + '/sys/file/showpic?id=';

                //======= 字符串，拆分id数组，拆分Url数组，拆分标识，url前缀
                this.disposePublicStrSplit(_that.dataForm.iconUrl, _that.iconUrlList, _that.iconUrlListUrl, 'url', imgUrlQz);

                //处理视频

                //======= 字符串，拆分id数组，拆分Url数组，拆分标识，url前缀
                this.disposePublicStrSplit(_that.dataForm.videoUrl, _that.videoUrlList, _that.videoUrlListUrl, 'id', '');
            });
        },
         /**
         * 图片 上传
         */

        // 图片 上传文件  成功回调
        updateIconUrl([url, sigleImgId, response, file, fileList]) {
            this.diosposeImageOp([file, fileList]);
        },
        // 删除文件回调
        iconMoreUpFileHandleRemove([file, fileList]) {
            this.diosposeImageOp([file, fileList]);
        },
        diosposeImageOp([file, fileList]) {
            this.iconUrlList = [];

            for (let index = 0; index < fileList.length; index++) {
                const element = fileList[index];
                console.log('上传的图片：', element);

                if (element.response != null) {
                    //不等于空为刚上传的文件
                    this.iconUrlList.push(element.response.result[0] + ':' + element.name);
                } else {
                    //为空为之前上传的文件
                    this.iconUrlList.push(element.urlId + ':' + element.name);
                }
            }
        },

        /**
         * 视频 上传
         */

        //视频 上传文件  成功回调
        moreUpVideoSuccessHandle([url, sigleImgId, response, file, fileList]) {
            this.diosposeFileOp([file, fileList]);
        },
        // 删除文件回调
        moreUpVideohandleRemove([file, fileList]) {
            this.diosposeFileOp([file, fileList]);
        },
        diosposeFileOp([file, fileList]) {
            this.videoUrlList = [];

            for (let index = 0; index < fileList.length; index++) {
                const element = fileList[index];
                console.log('视频多文件上传回调：', element);

                if (element.response != null) {
                    //不等于空为刚上传的文件
                    this.videoUrlList.push(element.response.result[0] + ':' + element.name);
                } else {
                    //为空为之前上传的文件
                    this.videoUrlList.push(element.urlId + ':' + element.name);
                }
            }
        },

        //视频 上传文件 失败回调
        moreUpVideoFileErrorHandle(val) {
            this.$message.error(`文件上传失败`);
        },

        //视频 多文件上传，超出限制回调
        moreUpVideoFileHandleExceed([files, fileList]) {
            this.$message.warning(
                `当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
            );
        },

        disposePublicStrSplit(fileStr, splicList, splicUrlList, splicFlag, urlConnection) {
            //字符串，拆分id数组，拆分Url数组，拆分标识，url前缀

            if (fileStr != null && fileStr !== '') {
                //== 1.拆分字符串 ’a:b,b:a‘ 为数组
                splicList = fileStr.split(',');

                for (let index = 0; index < splicList.length; index++) {
                    //== 2.数组中的 ’a:b‘ 在拆分 为数组
                    const element = splicList[index];
                    var elmentList = element.split(':');

                    //== 3.向 上传 绑定的数据集，添加[name，url，id] 数据
                    if (elmentList.length > 0) {
                        if (splicFlag === 'url') {
                            //文件名，文件地址（url)，文件id
                            splicUrlList.push({ name: elmentList[1], url: urlConnection + elmentList[0], urlId: elmentList[0] });
                        } else {
                            //文件名，文件地址(可id或url)，文件id
                            splicUrlList.push({ name: elmentList[1], url: elmentList[0], urlId: elmentList[0] });
                        }
                    } else {
                        //== 3.x  做预防,有可能字符串为’a,b‘ 没有分号

                        if (splicFlag === 'url') {
                            splicUrlList.push({ name: '文件' + index, url: urlConnection + element, urlId: element });
                        } else {
                            //文件名，文件地址(可id或url)，文件id
                            splicUrlList.push({ name: '文件' + index, url: element, urlId: element });
                        }
                    }
                }
            }
        },
        // 财务
        getBaseMondyDetail(baseId) {
            API.base.BaseMoneyInfoDetail({ baseId: baseId }).then((res) => {
                console.log(res);
                this.dataMoneyForm = res.result;
                this.dataMoneyForm['baseId'] = baseId;
            });
        },
        // 产品质量
        getBaseProductDetail(baseId) {
            API.base.BaseProductInfoDetail({ baseId: baseId }).then((res) => {
                console.log(res);
                this.dataProductForm = res.result;
                this.dataProductForm['baseId'] = baseId;
            });
        },

        //百度地图
        handler({ BMap, map }) {
            this.map = map;

            //自动定位设置中心点
            let _this = this;
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(
                function (r) {
                    console.log(r);
                    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                        _this.center = { lng: r.longitude, lat: r.latitude };
                        _this.zoom = 17;

                        var translateCallback = function (data) {
                            //坐标转换完之后的回调函数
                            console.log(data);
                            console.log(data.status);
                            if (data.status === 0) {
                                _this.isVisible = false; //审核一直不能修改 ，不显示地图操作按钮

                                if (_this.dialogType == 2) {
                                    if (_this.dataForm.longitude == null) {
                                        _this.$message({
                                            message: `基地地址坐标不准确，地图上无法正常显示`,
                                            type: 'warning'
                                        });
                                    }

                                    //编辑
                                    var point = new BMap.Point(_this.dataForm.longitude, _this.dataForm.latitude);
                                    var marker = new BMap.Marker(point);
                                    map.addOverlay(marker);
                                    var label = new BMap.Label('基地位置：(坐标不准确，地图上无法正常显示）', { offset: new BMap.Size(20, -10) });
                                    marker.setLabel(label); //添加百度label
                                    map.setCenter(point);
                                    _this.zoom = 17;
                                } else {
                                    //其他

                                    var marker = new BMap.Marker(data.points[0]);
                                    map.addOverlay(marker);
                                    var label = new BMap.Label('当前我的定位', { offset: new BMap.Size(20, -10) });
                                    marker.setLabel(label); //添加百度label
                                    map.setCenter(data.points[0]);
                                }
                            }
                        };

                        setTimeout(() => {
                            var convertor = new BMap.Convertor();
                            var pointArr = [];

                            var ggPoint = new BMap.Point(_this.center.lng, _this.center.lat);
                            pointArr.push(ggPoint);
                            convertor.translate(pointArr, 1, 5, translateCallback);
                        }, 1000);
                    } else {
                        console.log('map location failed', this.getStatus());
                    }
                },
                { enableHighAccuracy: true }
            );

            // 添加鼠标滚动缩放
            map.enableScrollWheelZoom();

            // 添加缩放平移控件
            map.addControl(new BMap.NavigationControl({ isOpen: false, anchor: BMAP_ANCHOR_TOP_RIGHT }));

            //添加比例尺控件
            map.addControl(new BMap.ScaleControl());
        },

        getClickInfo(e) {
            console.log('点击的地图位置信息：', e);

            //移动地图中心位置
            this.center.lng = e.point.lng;
            this.center.lat = e.point.lat;
            this.zoom = e.target.getZoom();
            
        },

        //地图 搜索点击
        searchClick() {
            this.addrDisabled = true;
            this.addrPlaceholder = '请在地图上选择基地地址';
            if (this.inputSearchAddr === '') {
                this.$message({
                    message: `请输入搜索地址`,
                    type: 'success'
                });

                return;
            }

            this.loading = true;
            this.searchAddr = this.inputSearchAddr;

            //最多60秒，不等完成 要消失
            setTimeout(() => {
                this.loading = false;
            }, 600000);
        },

        searchComplete(val) {
            this.loading = false;
            console.log('搜索完成监听：', val);
            if (val.Hr.length > 0) {
                // 利用坐标获取地址的详细信息
                let geoCoder = new BMap.Geocoder();
                geoCoder.getLocation(val.Hr[0].point, (res) => {
                    console.log('获取的搜索地址：', res);
                    let addr = res.address;

                    if (res.surroundingPois.length > 0) {
                        addr = addr + res.surroundingPois[0].title;

                        this.dataForm.basePosition = addr;
                        this.dataForm.longitude = res.surroundingPois[0].point.lng;
                        this.dataForm.latitude = res.surroundingPois[0].point.lat;
                    } else {
                        this.dataForm.basePosition = addr;
                        this.dataForm.longitude = e.point.lng;
                        this.dataForm.latitude = e.point.lat;
                    }
                });
            }
        },

        //手动输入地址
        enterAddrClick() {
            this.addrDisabled = false;
            this.addrPlaceholder = '手动输入的地址，地图上会正常显示';
            this.$message({
                message: `手动输入的地址，地图上会无法正常显示`,
                type: 'success'
            });
        },

        //获取底部 审核信息 详情
        getDetail(id) {
            API.base
                .getAuditDetail({
                    baseId: id
                })
                .then((res) => {
                    console.log(res);
                    this.dataForm = res.result;
                });
        },
        closePage(){
           this.$router.go(-1); 
        },
        
    }
};
</script>